<template>
  <div>
    <div class="tablebox">
      <div style="float: right">
        <el-button type="primary" size="mini" @click="infoVisible = true"
          >修改个人信息</el-button
        >
      </div>
      <div class="tableTitle">个人信息</div>
      <table class="infotable" width="100%">
        <tr>
          <th>姓名</th>
          <td>{{ userInfo.name }}</td>
          <th>信用积分</th>
          <td>{{ userInfo.credit_point }}</td>
        </tr>
        <tr>
          <th>账户余额</th>
          <td>{{ userInfo.balance }}</td>
          <th>性别</th>
          <td>{{ userInfo.sex ? "女" : "男" }}</td>
        </tr>
        <tr>
          <th>年龄</th>
          <td>{{ userInfo.age }}</td>
          <th>居住地址</th>
          <td>{{ userInfo.address }}</td>
        </tr>
        <tr>
          <th>工作单位</th>
          <td>{{ userInfo.work_unit }}</td>
          <th>邮箱</th>
          <td>{{ userInfo.email }}</td>
        </tr>
        <tr>
          <th>手机号码</th>
          <td>{{ userInfo.phone_number }}</td>
          <th>身份号</th>
          <td>{{ userInfo.id_number }}</td>
        </tr>
        <tr>
          <th>电表ID</th>
          <td>{{ userInfo.elec_meter_id }}</td>
          <th>个人描述</th>
          <td>{{ userInfo.user_desc }}</td>
        </tr>
      </table>
    </div>
    <div class="tablebox">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-header">
              <h4>余额走势</h4>
            </div>
            <div class="card-body">
              <div style="width: 700px; height: 300px">
                <div id="simplebar3" style="width: 550px; height: 300px" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-header">
              <h4>积分走势</h4>
            </div>
            <div class="card-body">
              <div style="width: 700px; height: 300px">
                <div id="simplebar4" style="width: 550px; height: 300px" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--修改个人信息开始 -->
    <el-dialog title="修改个人信息" :visible.sync="infoVisible" width="600px">
      <el-form ref="updateDto" :model="updateDto" label-width="120px">
        <el-form-item label="居住地址">
          <el-input v-model="updateDto.address" placeholder="请输入居住地址" />
        </el-form-item>
        <el-form-item label="工作单位">
          <el-input
            v-model="updateDto.work_unit"
            placeholder="请输入工作单位"
          />
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="updateDto.email" placeholder="请输入电子邮箱" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="updateDto.phone_number"
            placeholder="请输入联系电话"
          />
        </el-form-item>
        <el-form-item label="所属电表ID">
          <el-select
            v-model="updateDto.elec_meter_id"
            placeholder="请选择电表ID"
            style="width: 100%"
          >
            <el-option
              v-for="item in elecMeterIds"
              :key="item.index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="个人描述">
          <el-input
            v-model="updateDto.user_desc"
            type="textarea"
            placeholder="请输入个人描述"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/header/index.vue";
import Footer from "@/components/footer/index.vue";
import Login from "@/components/login/index.vue";
import Reg from "@/components/reg/index.vue";
import Release from "@/components/release/index.vue";
import { getUserInfo, execUpdate, getUserWalletLog } from "@/api/userCenter";
import { getElecMeterIds } from "@/api/head_index";
export default {
  components: {
    Header,
    Footer,
    Login,
    Reg,
    Release,
  },
  data() {
    return {
      infoVisible: false,
      userInfo: {
        user_id: "",
        name: "",
        credit_point: "",
        balance: "",
        sex: undefined,
        age: "",
        address: "",
        work_unit: "",
        email: "",
        phone_number: "",
        elec_meter_id: "",
        user_desc: "",
      },
      updateDto: {
        address: "",
        work_unit: "",
        email: "",
        phone_number: "",
        user_desc: "",
        elec_meter_id: "",
      },
      elecMeterIds: [],
      state: {
        //创建响应式数据对象和相关数据
        id: 1,
        data1: [],
        data2: [],
      },
    };
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart3 = this.$echarts.init(
        document.getElementById("simplebar3"),
        "dark"
      );
      const myChart4 = this.$echarts.init(
        document.getElementById("simplebar4"),
        "dark"
      );
      // 指定图表的配置项和数据
      const option3 = {
        name: "balance",
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["余额"],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
              color: "#F8F8FF",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF",
            },
          },
          boundaryGap: false,
          type: "category",
          data: Array.from({ length: 24 }, (v, k) => k),
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "元",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#F8F8FF", // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF", // 更改坐标轴颜色
            },
          },
        },
        series: [
          {
            name: "余额",
            data: this.state.data1,
            type: "line",
            color: "#EE82EE",
          },
        ],
      };
      const option4 = {
        name: "balance",
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["积分"],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
              color: "#F8F8FF",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF",
            },
          },
          boundaryGap: false,
          type: "category",
          data: Array.from({ length: 24 }, (v, k) => k),
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#F8F8FF", // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF", // 更改坐标轴颜色
            },
          },
        },
        series: [
          {
            name: "积分",
            data: this.state.data2,
            type: "line",
            color: "#00BFFF",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart3.setOption(option3);
      myChart4.setOption(option4);
    },
    updateUser() {
      // if (!/(^[1-9]\d*$)/.test(this.updateDto.phone_number)) {
      //   this.$message.error("电话格式不正确！");
      //   return;
      // }
      // if (
      //   !/^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i.test(
      //     this.updateDto.email
      //   )
      // ) {
      //   this.$message.error("电子邮箱格式不正确！");
      //   return;
      // }
      execUpdate(this.updateDto).then((res) => {
        this.$message.success("修改成功！");
        this.infoVisible = false;
        this.refreshInfo();
      });
    },
    refreshInfo() {
      getUserInfo().then((res) => {
        this.userInfo = res.data;
        this.updateDto.address = this.userInfo.address;
        this.updateDto.work_unit = this.userInfo.work_unit;
        this.updateDto.email = this.userInfo.email;
        this.updateDto.phone_number = this.userInfo.phone_number;
        this.updateDto.user_desc = this.userInfo.user_desc;
        this.updateDto.elec_meter_id = this.userInfo.elec_meter_id;
      });
    },
    getUserWalletLogHelp() {
      if (!localStorage.getItem("Token") || !localStorage.getItem("Name")) {
        return;
      }
      getUserWalletLog().then((res) => {
        // console.log(res.data)
        this.state.data1 = res.data.balances;
        this.state.data2 = res.data.credit_points;
        this.drawChart();
      });
    },
    getElecMeterIdsHelp() {
      if (!localStorage.getItem("Token") || !localStorage.getItem("Name")) {
        return;
      }
      getElecMeterIds().then((res) => {
        this.elecMeterIds = res.data;
      });
    },
    handleClose() {},
  },
  mounted() {
    this.refreshInfo();
    this.getUserWalletLogHelp();
    this.getElecMeterIdsHelp();
  },
};
</script>